<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>08.for循环生成10个div</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix {
				*zoom: 1;
			}
			
			input {
				display: block;
				width: 150px;
				height: 40px;
				font-weight: normal;
				font-size: 18px;
				line-height: 40px;
				font-family: "Microsoft YaHei";
				color: #fff;
				background-color: #000;
				outline: none;
				text-align: center;
				margin: 50px auto 0;
			}
			
			.wrap {
				width: 500px;
				margin: 50px auto 0;
			}	
			
			.wrap div {
				width: 48px;
				height: 48px;
				border: 1px solid #000;
				float: left;
				font-weight: bold;
				font-size: 18px;
				line-height: 50px;
				font-family: "SimSun";
				color: #999;
				text-align: center;
			}
		</style>
		<script>
			window.onload = function () {
				// 获取外框元素
				var oWrap = document.querySelectorAll(".wrap")[0];
				// 获取按钮元素
				var oBtn = document.querySelectorAll("input")[0];
				// 用来累加的变量
				var oInner = '';
				// 定义一个颜色数组
				var aColors = ["pink", "blue", "purple", "green"];
				// 要生成多少个div
				var len = 10;
				
				// 为按钮添加点击事件
				oBtn.addEventListener ("click", function () {
					// 这里添加10个，不影响，所以不清除哈哈
					// 每次点击之前先清空下，避免累加造成卡顿
					// oInner = '';
					for ( var i = 0; i < len; i++ ) {
						oInner += '<div style="background-color:'+ aColors[(i % aColors.length)] +'">'+ (i + 1) +'</div>';		
					}	
					
					// 等循环结束后一次性塞到这里面去
					oWrap.innerHTML = oInner;
				}, false);
			};
		</script>
	</head>
	<body>
		<input type="button" value="自动生成10个li" />
		<!-- 这里要存放10个div start -->
		<div class="wrap clearfix"></div>	
		<!-- 这里要存放10个div end -->
	</body>
</html>